import React from 'react';
import {
  Card,
  Typography,
  Tag,
  Button,
  Space,
  Checkbox,
  Collapse,
} from 'tdesign-react';
import { DeleteIcon } from 'tdesign-icons-react';
import type { Todo } from '../../types/todo.types';

interface TodoItemProps {
  todo: Todo;
  onComplete: (id: number) => void;
  onRemove: (id: number) => void;
  isUpdating?: boolean;
}

const priorityThemes = {
  low: 'success',
  medium: 'warning',
  high: 'danger',
} as const;

export const TodoItem: React.FC<TodoItemProps> = ({
  todo,
  onComplete,
  onRemove,
  isUpdating,
}) => {
  const [expanded, setExpanded] = React.useState(false);

  const handleComplete = () => {
    if (!todo.completed) {
      onComplete(todo.id);
    }
  };

  const cardStyle: React.CSSProperties = {
    marginBottom: '16px',
    opacity: todo.completed ? 0.7 : 1,
    transition: 'all 0.3s ease',
    backgroundColor: todo.completed ? '#f5f5f5' : 'white',
    cursor: todo.description ? 'pointer' : 'default',
  };

  const titleStyle: React.CSSProperties = {
    textDecoration: todo.completed ? 'line-through' : 'none',
    wordBreak: 'break-word',
    flex: 1,
  };

  return (
    <Card style={cardStyle}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
        <Checkbox
          checked={todo.completed}
          onChange={handleComplete}
          disabled={isUpdating || todo.completed}
          style={{ marginTop: '2px' }}
        />
        
        <div style={{ flex: 1 }}>
          <div 
            style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '8px', cursor: todo.description ? 'pointer' : 'default' }}
            onClick={() => todo.description && setExpanded(!expanded)}
          >
            <Typography.Text style={titleStyle}>
              {todo.title}
            </Typography.Text>
            
            <Space size="small">
              <Tag
                theme={priorityThemes[todo.priority]}
                size="small"
              >
                {todo.priority}
              </Tag>
              {todo.assignedTo && (
                <Typography.Text style={{ color: '#666', fontSize: '12px' }}>
                  {todo.assignedTo}
                </Typography.Text>
              )}
            </Space>
          </div>

          {todo.description && (
            <Collapse expandIcon={false} disabled={!expanded}>
              <Typography.Text style={{ color: '#666', marginTop: '8px', display: 'block' }}>
                {todo.description}
              </Typography.Text>
            </Collapse>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '8px' }}>
            <Typography.Text style={{ color: '#666', fontSize: '12px' }}>
              {new Date(todo.createdAt).toLocaleDateString()}
            </Typography.Text>
            
            <Button
              size="small"
              theme="danger"
              variant="text"
              icon={<DeleteIcon />}
              onClick={(e) => {
                e.stopPropagation();
                onRemove(todo.id);
              }}
              disabled={isUpdating}
              loading={isUpdating}
            />
          </div>
        </div>
      </div>
    </Card>
  );
};